Back to Home
Flexbox Playground
Container Properties
flex-direction
row (default)
row-reverse
column
column-reverse
flex-wrap
nowrap (default)
wrap
wrap-reverse
justify-content
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
align-items
stretch (default)
flex-start
flex-end
center
baseline
align-content
normal (default)
flex-start
flex-end
center
space-between
space-around
stretch
gap
0
10px
20px
30px
Add
Remove
Load Preset...
Perfect Center
Navigation Bar
Sidebar Layout
Photo Grid
1
2
3
.container { display: flex; }
Copy